<template>
  <section>
    <h2 onclick="save()">
      正在进行 <span id="todocount">{{ Todos.length }}</span>
    </h2>
    <ol id="todolist" class="demo-box">
      <li v-for="item in Todos" :key="item.id">
        <input
          type="checkbox"
          v-model="item.done"
          @click="changeState(item.id)"
        />
        <p>{{ item.title }}</p>
        <a @click="check(item.id, item.done)" title="删除">-</a>
      </li>
    </ol>
    <h2>
      已经完成 <span id="donecount">{{ doneTodos.length }}</span>
    </h2>
    <ul id="donelist">
      <li v-for="item in doneTodos" :key="item.id">
        <input
          type="checkbox"
          v-model="item.done"
          @click="changeState(item.id)"
        />
        <p>{{ item.title }}</p>
        <a @click="check(item.id,item.done)" title="删除">-</a>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["Todos", "doneTodos", "checkTodo", "changeStateTodo"],
  methods: {
    // 删除todo
    check(id, done) {
      if (done) {
        this.checkTodo(id);
      } else if (confirm("确定要删除还没有完成的事项吗?")) {
        this.checkTodo(id);
      }
    },
    // 改变todo状态
    changeState(id) {
      this.changeStateTodo(id);
    },
  },
};
</script>

<style scoped>
section {
  margin: 0 auto;
}
h2 {
  color: #008c8c;
  position: relative;
  font-size: 1.5em;
  font-weight: 700;
  padding-bottom: 20px;
}
span {
  position: absolute;
  top: 10px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #e6e6fa;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
li input {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
p {
  margin: 0;
}
li p input {
  top: 5px;
  left: 40px;
  width: 70%;
  height: 20px;
  line-height: 14px;
  text-indent: 5px;
  font-size: 14px;
}
li {
  height: 32px;
  line-height: 32px;
  background: #fff;
  position: relative;
  margin-bottom: 10px;
  padding: 0 45px;
  border-radius: 3px;
  border-left: 5px solid #629a9c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ol li {
  cursor: move;
}
ul li {
  border-left: 5px solid #999;
  opacity: 0.5;
}
li a {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 14px;
  border: 6px double #fff;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
</style>
